<template>
  <view>
    <view class="info yd-flex-v-hC-vC">
      <image
        v-if="userInfo.avatar"
        :src="YD_formatUrl(userInfo.avatar)"
        class="info__avatar"
      />
      <image v-else class="info__avatar" src="~@/static/my/defaultAvatar.png" />
      <text>{{ userInfo.nickname ? userInfo.nickname : "点击授权" }}</text>
    </view>
    <view class="body">
      <view class="title">固定车位</view>
      <scroll-view scroll-x="true">
        <view class="block">
          <view
            v-for="(item, index) in fixedData"
            :index="index"
            :key="index"
            class="item"
            :class="{ active: packageValue === item.code }"
            @click="choose(item)"
          >
            <view class="name">{{ item.name }}</view>
            <view class="price"
              >￥<span class="num">{{ item.price }}</span></view
            >
            <view class="note">{{ item.note }}</view>
            <view v-if="item.code === 'fixed_month'" class="hot">热销中</view>
          </view>
        </view>
      </scroll-view>
      <view class="title">自由车位</view>
      <scroll-view scroll-x="true">
        <view class="block">
          <view
            v-for="(item, index) in freeData"
            :index="index"
            :key="index"
            class="item"
            :class="{ active: packageValue === item.code }"
            @click="choose(item)"
          >
            <view class="name">{{ item.name }}</view>
            <view class="price"
              >￥<span class="num">{{ item.price }}</span></view
            >
            <view class="note">{{ item.note }}</view>
          </view>
        </view>
      </scroll-view>
      <view v-if="carList.length === 0" @click="bindCar" class="btn"
        >立即开通</view
      >
      <picker
        v-else
        class="picker"
        range-key="number"
        :range="carList"
        @change="chooseCar"
      >
        <view class="btn">立即开通</view>
      </picker>
    </view>
  </view>
</template>

<script>
import user from "@/mixins/user.js";
import { YD_formatUrl } from "@/utils/tools.js";
import { getPackageListAPI } from "@/api/package.js";
import { getCarListAPI } from "@/api/car.js";

export default {
  mixins: [user],
  data() {
    return {
      YD_formatUrl,
      packageAllData: [],
      fixedData: [],
      freeData: [],
      packageValue: "fixed_month",
      carList: [],
    };
  },
  onLoad() {
    this.getPackageList();
    getCarListAPI().then((res) => {
      this.carList = res.rows;
    });
  },
  methods: {
    /** @name 获取套餐列表 **/
    getPackageList() {
      getPackageListAPI().then((res) => {
        this.packageAllData = res.rows;
        res.rows.forEach((item) => {
          if (item.code === "try_package" || item.code === "fixed_main") return;
          if (item.type === 1) {
            if (item.code === "fixed_month") {
              this.fixedData.unshift(item);
            } else {
              this.fixedData.push(item);
            }
          }
          if (item.type === 0) {
            if (item.code === "free_month") {
              this.freeData.unshift(item);
            } else {
              this.freeData.push(item);
            }
          }
        });
      });
    },
    /** @name 选择套餐 **/
    choose(item) {
      this.packageValue = item.code;
    },
    /** @name 绑定车辆 **/
    bindCar() {
      uni.navigateTo({
        url: `/subpages/my/bind/form/form?from=package`,
        success: () => {
          uni.$once("bind", () => {
            this.getCarList();
          });
        },
      });
    },
    /** @name 获取车辆列表 **/
    getCarList() {
      getCarListAPI().then((res) => {
        this.carList = res.rows;
      });
    },
    /** @name 选择车辆 **/
    chooseCar(e) {
      const index = e.detail.value;
      const target = this.carList[index];
      const packageItem = this.packageAllData.find(
        (item) => item.code === this.packageValue
      );
      uni.navigateTo({
        url: `/subpages/shop/pay/pay?from=package&number=${encodeURIComponent(
          target.number
        )}&packageId=${packageItem.id}`,
      });
    },
  },
};
</script>

<style lang="scss">
page {
  background-color: #fff;
}
.info {
  font-size: 40rpx;
  color: #333;
  font-weight: 500;
  word-break: break-all;
  position: relative;
  box-sizing: border-box;
  padding: 32rpx 24rpx 24rpx 24rpx;
}
.info__avatar {
  min-width: 128rpx;
  width: 128rpx;
  height: 128rpx;
  border-radius: 50%;
  border: 2px solid #fff;
  margin-bottom: 10px;
}
.body {
  box-sizing: border-box;
  padding: 0 24rpx;
}
.title {
  font-size: 30rpx;
  font-weight: bold;
  display: flex;
  align-items: center;
  margin-bottom: 24rpx;
  line-height: 1;
  margin-top: 32rpx;
  &::before {
    content: "";
    display: block;
    width: 6rpx;
    height: 30rpx;
    background-color: $primary;
    margin-right: 12rpx;
    border-radius: 12rpx;
  }
}
.block {
  display: flex;
}
.item {
  min-width: 180rpx;
  width: 180rpx;
  height: 240rpx;
  border: 2rpx solid #eee;
  border-radius: 12rpx;
  margin-right: 12px;
  position: relative;
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  line-height: 1;
  position: relative;
  overflow: hidden;
  &.active {
    background-color: rgba(55, 122, 255, 0.1);
    border-color: #377aff;
  }
  .name {
    color: #000;
    font-size: 28rpx;
    margin-top: 52rpx;
  }
  .price {
    color: #ff3513;
    font-size: 24rpx;
    margin-top: 36rpx;
    .num {
      font-size: 40rpx;
    }
  }
  .note {
    color: #ccc;
    font-size: 24rpx;
    margin-top: 40rpx;
  }
  .hot {
    position: absolute;
    top: 0;
    left: 0;
    background-color: #377aff;
    color: #fff;
    font-size: 24rpx;
    box-sizing: border-box;
    padding: 6rpx 16rpx;
    border-radius: 0 0 12rpx 0;
  }
}
.btn {
  width: 100%;
  height: 88rpx;
  background-color: #377aff;
  color: #fff;
  font-size: 30rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  line-height: 1;
  border-radius: 40rpx;
  margin-top: 52rpx;
}
</style>
